<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { getWolrdListApi } from '/api/request.js';
onMounted(() => {
    fetchList();
});
const list = ref(null);
const fetchList = async (type = true) => {
    uni.showLoading({});
    if (!type || !list.value) {
        list.value = [];
    }
    let res = await getWolrdListApi();
    console.log(res);
    uni.hideLoading();
    res.data.map((item) => {
        item.image = `http://zhangyu.aizhangyu.cn${item.image}`;
        list.value.push(item);
    });
    console.log(list.value);
};
const props = defineProps({});
let platform = uni.getStorageSync('platform');
const goback = () => {
    uni.navigateBack();
};
const showSelectPage = (id) => {
    uni.navigateTo({
        url: '/pages/world/selectWorld?id=' + id
    });
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            ></image>
            <view class="title"> 选择词包 </view>
            <image
                class="left"
                style="opacity: 0"
                src="/static/img/goback-black.png"
                mode="widthFix"
            ></image>
        </view>
        <scroll-view
            scroll-y="true"
            class="body"
            :style="{
                height: platform.gaodu - platform.dingbu - 96 + 'rpx'
            }"
        >
            <view
                class="item uni-row"
                v-for="(item, index) in list"
                :key="index"
                @click="showSelectPage(item.id)"
            >
                <image :src="item.image" mode="widthFix" class="left-img" />
                <view class="text-wrap">
                    <view class="title">
                        {{ item.name }}
                    </view>
                    <view class="label yincang">
                        单词数量 {{ item.word_count }} 个，已学 {{ item.learned }}个，剩余
                        {{ item.surplus }}个
                    </view>
                </view>
                <view class="btn uni-row"> 汇总强化 </view>
            </view>
            <view style="height: 4rpx"> </view>
        </scroll-view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        padding-left: 28rpx;
        padding-right: 28rpx;

        .item {
            padding: 20rpx 12rpx;
            height: 140rpx;
            margin-bottom: 16rpx;
            background-color: #fff;
            border-radius: 16rpx;

            .left-img {
                width: 100rpx;
                margin-right: 12rpx;
                border-radius: 16rpx;
            }

            .text-wrap {
                margin-right: 32rpx;

                .title {
                    font-size: 28rpx;
                    color: #333333;
                }

                .label {
                    width: 450rpx;
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: #999999;
                }
            }

            .btn {
                justify-content: center;
                width: 106rpx;
                height: 40rpx;
                background: #e7e4f8;
                border-radius: 8rpx;
                font-size: 20rpx;
                color: #9893fd;
            }
        }
    }
}
</style>
